<template>
  <div class="order-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>订单列表</span>
          <el-button type="primary" @click="handleExport">导出订单</el-button>
        </div>
      </template>

      <!-- 搜索区域 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="待付款" value="pending" />
            <el-option label="待发货" value="paid" />
            <el-option label="已发货" value="shipped" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="cancelled" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 订单列表 -->
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column label="商品信息" min-width="300">
          <template #default="scope">
            <div v-for="item in scope.row.items" :key="item.id" class="order-item">
              <el-image
                :src="item.image"
                style="width: 50px; height: 50px"
                :preview-src-list="[item.image]"
              />
              <div class="item-info">
                <div class="item-name">{{ item.name }}</div>
                <div class="item-spec">{{ item.spec }}</div>
              </div>
              <div class="item-price">
                ¥{{ item.price.toFixed(2) }} × {{ item.quantity }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="订单金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.totalAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="100">
          <template #default="scope">
            <el-tag :type="getOrderStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="180" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleDetail(scope.row)">
              详情
            </el-button>
            <el-button 
              v-if="scope.row.status === '待发货'"
              type="success" 
              size="small" 
              @click="handleShip(scope.row)"
            >
              发货
            </el-button>
            <el-button 
              v-if="scope.row.status === '待付款'"
              type="danger" 
              size="small" 
              @click="handleCancel(scope.row)"
            >
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      v-model="detailDialogVisible"
      width="800px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单号">{{ currentOrder.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ currentOrder.createTime }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="getOrderStatusType(currentOrder.status)">
            {{ currentOrder.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ currentOrder.paymentMethod }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">收货信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="收货人">{{ currentOrder.receiver }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentOrder.phone }}</el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="2">{{ currentOrder.address }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">商品信息</el-divider>
      <el-table :data="currentOrder.items" border style="width: 100%">
        <el-table-column label="商品图片" width="100">
          <template #default="scope">
            <el-image
              :src="scope.row.image"
              style="width: 50px; height: 50px"
              :preview-src-list="[scope.row.image]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="spec" label="规格" width="120" />
        <el-table-column prop="price" label="单价" width="120">
          <template #default="scope">
            ¥{{ scope.row.price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="80" />
        <el-table-column label="小计" width="120">
          <template #default="scope">
            ¥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>

      <div class="order-amount">
        <span>订单总额：</span>
        <span class="amount">¥{{ currentOrder.totalAmount?.toFixed(2) }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  orderNo: '',
  status: '',
  dateRange: []
})

// 订单列表数据
const orderList = ref([
  {
    orderNo: 'DD20240318001',
    items: [
      {
        id: 1,
        name: '高级猫粮 - 三文鱼味',
        spec: '2kg装',
        price: 199.00,
        quantity: 2,
        image: 'https://placeholder.com/100'
      },
      {
        id: 2,
        name: '猫咪玩具套装',
        spec: '标准版',
        price: 59.90,
        quantity: 1,
        image: 'https://placeholder.com/100'
      }
    ],
    totalAmount: 457.90,
    status: '待发货',
    createTime: '2024-03-18 10:00:00',
    receiver: '张三',
    phone: '13800138000',
    address: '北京市朝阳区xxx街道xxx小区',
    paymentMethod: '微信支��'
  },
  {
    orderNo: 'DD20240318002',
    items: [
      {
        id: 3,
        name: '狗狗磨牙玩具',
        spec: '大号',
        price: 29.90,
        quantity: 3,
        image: 'https://placeholder.com/100'
      }
    ],
    totalAmount: 89.70,
    status: '已完成',
    createTime: '2024-03-18 09:30:00',
    receiver: '李四',
    phone: '13900139000',
    address: '上海市浦东新区xxx路xxx号',
    paymentMethod: '支付宝'
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 详情对话框
const detailDialogVisible = ref(false)
const currentOrder = reactive({})

// 方法定义
const handleSearch = () => {
  ElMessage.success('搜索功能待实现')
}

const resetSearch = () => {
  searchForm.orderNo = ''
  searchForm.status = ''
  searchForm.dateRange = []
}

const getOrderStatusType = (status) => {
  const types = {
    '待付款': 'warning',
    '待发货': 'primary',
    '已发货': 'success',
    '已完成': 'success',
    '已取消': 'info'
  }
  return types[status] || 'info'
}

const handleDetail = (row) => {
  Object.assign(currentOrder, row)
  detailDialogVisible.value = true
}

const handleShip = (row) => {
  ElMessageBox.confirm(`确认发货订单 ${row.orderNo}？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('发货成功')
  })
}

const handleCancel = (row) => {
  ElMessageBox.confirm(`确认取消订单 ${row.orderNo}？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('订单已取消')
  })
}

const handleExport = () => {
  ElMessage.success('订单导出功能待实现')
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.order-item:last-child {
  border-bottom: none;
}

.item-info {
  flex: 1;
  margin: 0 15px;
}

.item-name {
  font-size: 14px;
  color: #333;
}

.item-spec {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.item-price {
  font-size: 14px;
  color: #666;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.order-amount {
  margin-top: 20px;
  text-align: right;
  font-size: 14px;
}

.order-amount .amount {
  font-size: 20px;
  color: #f56c6c;
  font-weight: bold;
  margin-left: 10px;
}
</style> 